<template>
  <div class="bindtel">
    <van-nav-bar
      :title="$t('update.whatsappTitle')"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="bindtel-body">
      <van-form ref="fromRef">
        <van-cell-group :border="false">
          <div class="bindtel-label">
            {{ t("update.whatsappTitle") }}
          </div>
          <van-field
            :border="false"
            class="dev-field tel-field"
            v-model="data.whatsapp"
            name="whatsapp"
            :placeholder="t('update.whatsappLbel')"
            :rules="[{ validator: whatsCodevalidate }]"
          >
            <template #label>
              <div class="tel-label">
                +<span
                  v-if="!data.whatsappCode"
                  class="select-tel"
                  @click="showPicker = true"
                  >{{ $t("areaCode") }}</span
                >
                <van-field
                  v-else
                  v-model="data.whatsappCode"
                  is-link
                  readonly
                  name="picker"
                  @click="showPicker = true"
                  class="select-tel"
                >
                  <template #default>
                    <div>211</div>
                  </template>
                </van-field>
                <img
                  src="@/assets/images/person/triangle.png"
                  class="traangle"
                />
              </div>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>
    <van-popup :show="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        :columns-field-names="fieldName"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <div class="bindtel-foot">
      <van-button
        type="primary"
        round
        width="244px"
        @click="onSubmit"
        :loading="subLoading"
        >{{ t("update.btn") }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { onMounted } from "vue";
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import usePoint from "@/hooks/usePoint.js";
import { updateUserInfo } from "@/api/user";
const point = usePoint();
const router = useRouter();
const { t } = useI18n();
const data = reactive({
  whatsapp: "",
  whatsappCode: "",
});
const validator = (val) => /\d{6}/.test(val);
const fromRef = ref(null);
let subLoading = ref(false);
let showPicker = ref(false); //控制区号的显示
const fieldName = { text: "areaCode", value: "areaCode" };
const columns = [{ areaCode: "234" }, { areaCode: "1" }]; //选择whats区号
const whatsCodevalidate = (value) => {
  console.log(3333, data.whatsappCode);
  // let reglength = [0-9]{10,11};
  let testTeg1 = /^[7|8|9]{1}[0-9]{9,10}/;
  let tel = /^[0-9]{10,11}$/;
  if (!value) {
    return t("login.WHATSAPplace");
  } else if (value.length > 11 || value.length < 10) {
    return t('person.whatsappid') + t("two.whatsLength");
  } else if (
    (data.whatsappCode == 234 && !testTeg1.test(value)) ||
    !tel.test(value)
  ) {
    return t('person.whatsappid') + t("password.errFormat");
  }
};
onMounted(() => {
  data.whatsapp = point.userInfo.whatsapp;
  data.whatsappCode = point.userInfo.whatsappCode;
});
const onConfirm = (item) => {
  console.log(item);
  data.whatsappCode = item.areaCode;
  showPicker.value = false;
};
function onClickLeft() {
  history.back();
}
function onSubmit() {
  fromRef.value.validate().then((res) => {
    updateUserInfo({ ...point.userInfo, ...data })
      .then((res) => {
        subLoading.value = false;
        point.updataInfo();
        Toast(t("password.successMsg"));
      })
      .catch((err) => {
        Toast(err);
        subLoading.value = false;
      });
    // router.push({ path: "/information" });
  });
}
</script>

<style lang="less" scoped>
.bindtel {
  &-body {
    padding: 0px 16px;
  }
  &-label {
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-top: 15px;
  }
  .traangle {
    width: 10px;
    height: 15px;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    top: 3px;
  }
  .tel-label {
    border-bottom: 1px solid #626060;
    position: relative;
    top: 1px;
    // padding-bottom: 5px;
    text-align: center;
    display: flex;
    height: 32px;
    overflow: hidden;
    min-width: 100px;

    :deep(.van-cell.van-cell--clickable.van-field.select-tel) {
      height: 34px;
    }
  }
  :deep(.van-cell__title.van-field__label) {
    width: 60px;
    margin-right: 0px;
  }
  &-foot {
    margin-top: 52px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
  :deep(.van-cell.van-cell--clickable.van-field.select-tel) {
    border: 0px;
    padding: 0px 1px;
  }
  :deep(.van-cell.van-field.dev-field.select-tel .van-field__body) {
    border: 0px;
    padding: 0px;
  }
  .tel-field {
    :deep(.van-cell__title.van-field__label) {
      min-width: 95px;
    }
  }
  .select-tel {
    :deep(i.van-badge__wrapper.van-icon.van-icon-arrow.van-cell__right-icon) {
      display: none;
    }
    :deep(.van-field__body) {
      border-bottom: 0px;
    }
  }
}
</style>
